<template>
  <div class='subjects'>
    <el-card>
      <el-form label-width="100px" ref="searchForm" :model="searchForm">
        <!-- 搜索部分 -->
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="searchForm.subjectName" placeholder="请输学科名称"></el-input>
          <el-button @click="resetForm">清除</el-button>
          <el-button type="primary" @click="searchForm.page = 1; getSubjectsData()">搜索</el-button>
          <el-button class="right" type="success" icon="el-icon-edit" @click="AddSubject=true">新增学科</el-button>
          <!-- 对话弹框 -->
          <el-dialog title="新增学科" :append-to-body="true" :visible.sync="AddSubject" width="30%" :destroy-on-close="true" @closed='onDialogClose'>
            <el-form :model="addSub" :rules="rules">
              <el-form-item label="学科名称" width="80px" prop="subjectName">
                <el-input v-model="addSub.subjectName"></el-input>
              </el-form-item>
              <el-form-item label="是否显示" width="80px">
                <el-switch v-model="addSub.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949" :inactive-value="0" :active-value="1"></el-switch>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="AddSubject = false">取 消</el-button>
              <el-button type="primary" @click="AddSubjectsFN">确 定</el-button>
            </div>
          </el-dialog>
        </el-form-item>
      </el-form>
      <!-- 数据表 -->
      <el-alert type="info" show-icon><span>数据一共{{total}}条</span></el-alert>
      <el-table :data='list'>
        <el-table-column label="序号" prop="id" type="index">
        </el-table-column>
        <el-table-column label="学科名称" prop="subjectName"></el-table-column>
        <el-table-column label="创建者" prop="username">
        </el-table-column>
        <el-table-column label="创建日期" prop="addDate">
          <template v-slot="scope">
            <div>{{$moment(scope.row.addDate).format('YYYY-MM-DD HH:mm:ss')}}</div>
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示" prop="isFrontDisplay">
          <template v-slot='scope'>
            <span v-if="scope.row.isFrontDisplay===1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="二级目录" prop="twoLevelDirectory">
        </el-table-column>
        <el-table-column label="标签" prop="tags">
        </el-table-column>
        <el-table-column label="题目数量" prop="totals">
        </el-table-column>
        <el-table-column label="操作" width="250px">
          <template v-slot='scope'>
            <el-link @click="handleJump(scope.row)" type="primary">学科分类</el-link>
            <el-link @click="tagsJump(scope.row)" type="primary">学科标签</el-link>
            <el-link @click="updataSubject(scope.row)" type="warning">修改</el-link>
            <el-link @click="handleDelete(scope.row.id)" type="danger">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination background :current-page=' Number(searchForm.page)' :page-size='Number(searchForm.pagesize)' @current-change='changePager' layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { list, remove, add, update } from '@/api/hmmm/subjects.js'
export default {
  name: 'subject',
  data () {
    return {
      searchForm: {
        // 页码
        page: 1,
        // 每页数量
        pagesize: 10,
        // 学科名称
        subjectName: ''
      },
      addSub: {
        subjectName: '',
        isFrontDisplay: 1,
        id: null
      },
      subId: null,
      // 控制弹框状态
      AddSubject: false,
      // 总数
      total: 0,
      // 请求回来的学科数据
      list: [],
      // 表单验证规则
      rules: {
        subjectName: [
          {
            required: true,
            message: '请输入学科名称',
            trigger: 'blur',
            min: 1,
            max: 10
          }
        ]
      }
    }
  },
  methods: {
    onDialogClose () {
      // 将数据恢复成原来值(原本addSub中的subjectName的值就是空)
      this.addSub = this.$options.data().addSub
      // 各种扫尾工作...
    },
    // 修改
    async updataSubject (data) {
      this.AddSubject = true
      this.addSub.subjectName = data.subjectName
      this.addSub.isFrontDisplay = data.isFrontDisplay
      this.addSub.id = data.id
    },
    // 增加学科功能函数
    async AddSubjectsFN () {
      if (this.addSub.id === null) {
        const ret = await add(this.addSub)
        if (ret) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
        } else {
          this.$message.error('添加失败')
        }
      } else {
        const ret = await update(this.addSub)
        if (ret) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          this.$message.error('修改失败')
        }
      }
      this.addSub.subjectName = ''
      this.addSub.isFrontDisplay = 1
      this.addSub.id = null
      this.AddSubject = false
      this.getSubjectsData()
    },
    // 重置表单
    resetForm (searchForm) {
      this.$refs.searchForm.resetFields()
    },
    // 跳转到学科标签
    tagsJump (data) {
      this.$router.push({
        path: '/subjects/tags',
        query: { id: data.id, subjectName: data.subjectName }
      })
    },
    // 跳转到学科分类
    handleJump (data) {
      this.$router.push({
        path: '/subjects/directorys',
        query: { id: data.id, subjectName: data.subjectName }
      })
    },
    // 删除学科
    handleDelete (id) {
      this.$confirm('确认要删除吗?').then(async () => {
        await remove({ id: id })
        this.$message.success('删除成功！')
        this.getSubjectsData()
      })
        .catch((e) => {
          // 这个catch有两个作用 1.取消删除,2.有异常触发
          if (e === 'cancel') {
            console.log('取消删除')
          } else {
            this.$message.error('删除文章失败！')
          }
        })
    },
    // 实现分页功能
    changePager (page) {
      this.searchForm.page = page
      this.getSubjectsData()
    },
    // 加载学科列表功能
    async getSubjectsData () {
      try {
        const ret = await list(this.searchForm)
        console.log(ret)
        this.list = ret.data.items
        this.total = ret.data.counts
      } catch (error) {
        console.log(error)
        this.$message.error('获取学科列表失败')
      }
    }
  },
  created () {
    this.getSubjectsData()
  }
}
</script>

<style scoped lang='less'>
.subjects {
  .el-input {
    width: 150px;
    margin-right: 10px;
  }
  .el-link {
    margin-right: 5px;
  }
}
.right {
  float: right;
}
</style>
